<template>
  <div class="tabs">
    <el-divider></el-divider>
    <div class="tags-wrap">
      <el-tag
        size="small"
        :key="tag.path"
        v-for="tag in tags"
        :closable="tag.name != '首页'"
        :disable-transitions="false"
        :class="{'el-tag-select': tag.select}"
        @close="handleClose(tag)"
        @click="showMain(tag)"
        type="info"
      >
        {{ tag.name }}
      </el-tag>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  components: {},
  data() {
    return {
    };
  },
  methods: {
    ...mapMutations({
      close: 'closeTab'
    }),
    // 关闭的方法
    handleClose(tag) {
      let tagss = this.$store.state.tab.tabList;
      let tagssLength = tagss.length;

      // 1.先判断当前将要删除的tag是不是目前选中的tag
      if(tag.select) {//如果是,则默认路由到前一位
        //获得当前路由在vuex中的下标
        let index = 0;
        for(let i = 0; i < tagssLength; i ++) {
          if(tagss[i].path == tag.path) {
            index = i;
            break;
          }
        }
        this.$router.push(tagss[index-1].path);//路由跳转到这个页面
        this.$store.commit("selectMemu", tagss[index-1]);//作tags展示
      }
      //如果不是,直接删除tag,不做跳转
      this.close(tag);
    },
    showMain(tag) {
       this.$router.push(tag.path);
       //console.log(tag);
       this.$store.commit("selectMemu", tag);
    }
  },
  computed: {
    // ...mapState({
    //   tags: state => state.tab.tabList
    // })
    tags() {
      //返回vuex里面保存的所有打开的tabList
      return this.$store.state.tab.tabList;
    }
  }
};
</script>
<style scoped>
.tabs {
  padding: 0px 20px 0px 20px;
}

/* .tags-wrap .el-tag.el-tag--info {
  margin-right: 3px;
  background: none;
  color: black;
  border-radius: 0px;  
  cursor:pointer;
} */

>>>.el-tag--info {
  margin-right: 3px;
  background: none !important;
  color: black !important;
  border-radius: 0px !important;
  cursor:pointer !important;
}

>>> .el-tag-select {
  background-color: rgb(24, 144, 255) !important;
  color: #fff !important;
}

.tags-wrap {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  /* overflow-x:hidden; */
}
</style>